<template>
  <div class="containerr">
    <div class="notice-header">
      <div class="header-top">
        <div class="notice-icon"><a-avatar :size="64" icon="user" /></div>
        <div class="notice-top-top">
          <div class="notice-name">系统公告</div>
          <div class="notice-time">{{ 1620275291068 | relativeTime }}</div>
        </div>
      </div>
      <div class="header-bottom">
        <div class="notice-title">{{ config.title }}</div>
      </div>
    </div>
    <div class="notice-middle">
      <div
        v-show="config && config.content"
        v-html="config.content"
        class="notice-info"
        style="font-size: 20px; font-weight: 600"
      ></div>
      <div class="notice-img"></div>
    </div>

    <div class="notice-footer">
      <div class="footer-top">
        <div class="top-left">
          <div class="look" style="font-size: 12px">浏览5次</div>
        </div>
        <div class="top-right">
          <a-icon
            type="heart"
            theme="twoTone"
            two-tone-color="#eb2f96"
            @click="addLikeHandle()"
          />
          <a-icon
            type="message"
            theme="twoTone"
            two-tone-color="#52c41a"
            @click="handleComment"
          />
        </div>
      </div>
      <div class="footer-middle">
        <div class="like">
          <a-icon type="heart" theme="twoTone" two-tone-color="#eb2f96" />{{
            config.like
          }}人觉得很赞
        </div>
        <div class="comment-wrapper">
          <div class="comment-header">共有{{ commentLength }}条评论</div>
          <a-list
            class="comment-list"
            item-layout="horizontal"
            :data-source="commentList"
          >
            <a-list-item slot="renderItem" slot-scope="item">
              <a-comment :author="item.author" :avatar="item.avatar">
                <p slot="content">
                  {{ item.content }}
                </p>
              </a-comment>
            </a-list-item>
          </a-list>
        </div>
      </div>
      <div class="footer-bottom">
        <a-textarea
          placeholder="评论"
          allow-clear
          @change="onChange"
          @click="onClick"
          ref="textarea"
        />
        <a-button v-show="btnVisible" type="primary" class="sendBtn">
          发表
        </a-button>
        <a-button
          v-show="btnVisible"
          type="danger"
          class="deleteBtn"
          @click="cancel"
          >取消</a-button
        >
      </div>
    </div>
  </div>
</template>


<script lang="ts">
import { Component, Vue, Prop } from 'vue-property-decorator'
import { addLike, getComment } from '@/api/Notice'
import { config } from '@/plugins/axios'
import Msg from '@/interface/Msg'
import { Debounce } from '@/plugins/Debounce'
@Component
export default class CommonCard extends Vue {
  value = ''
  btnVisible = false
  commentLength = 0
  commentList: any = []
  @Prop() private config!: any
  created() {
    console.log(this.config)
    this.getCommentList()
  }
  onChange(e) {
    console.log(e)
  }
  onClick() {
    this.btnVisible = true
  }
  @Debounce
  addLikeHandle() {
    this.config.like++
    addLike({ id: this.config.id })
  }
  handleComment() {
    this.btnVisible = !this.btnVisible
    this.$refs['textarea'].focus()
  }
  cancel() {
    this.btnVisible = false
  }
  async getCommentList() {
    let res: Msg = await getComment({ id: this.config.id })
    if (res.data.size == 0) {
      this.commentLength = 0
    } else {
      this.commentList = res.data.content
    }
    // console.log('comment', data)
    // if (data.data.data.content.length === 0) {
    //   this.commentLength = 0
    // } else {
    //   this.commentList = data.data.data.content
    // }
  }
}
</script>

<style scoped>
.containerr {
  width: 70%;
  height: 100%;
  margin: 40px auto;
  border-radius: 10px;
  box-shadow: 0 2px 6px grey;
  background-color: #fff;
}
.notice-header {
  width: 100%;
  height: 150px;
  padding: 15px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}
.header-top {
  display: flex;
}
.notice-top-top {
  display: flex;
  flex-direction: column;
  justify-content: center;
  margin-left: 10px;
}
.notice-name {
  font-size: 16px;
  font-weight: 700;
}
.notice-time {
  margin-top: 5px;

  font-size: 12px;
  font-weight: 200;
  font-family: 'Microsoft Yahei';
}
.header-bottom {
  margin-top: 10px;
}
.notice-middle {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-left: 10px;
  border-bottom: 1px solid #eee;
  padding-bottom: 10px;
}
.notice-footer {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
}
.footer-top {
  display: flex;
  justify-content: space-between;
}
.top-left {
  margin-left: 10px;
}
.top-right {
  margin-right: 10px;
}
.footer-middle {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-left: 10px;
  margin-bottom: 10px;
}
.comment-wrapper {
  margin-top: 10px;
}
.comment-header {
  font-size: 12px;
}
.comment-list {
  margin-left: 10px;
  margin-top: 10px;
}
.anticon {
  margin-right: 6px;
  font-size: 24px;
}
.footer-bottom {
  margin: 10px;
}
.sendBtn {
  margin-top: 10px;
  left: 50%;
}
.deleteBtn {
  margin-top: 10px;
  left: 25%;
}
</style>
